<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        input.ng-invalid {
            background-color: lightblue;
        }

    </style>
</head>

<body>
    <!-- ng-app指令 初始化应用程序 -->
    <!-- ng-init指令 初始化指定数据 -->
    <form data-ng-app="myApp" data-ng-controller="myCtrl" name="my">
        <h3>使用 ng-model 绑定数据</h3>
        <p>
            <span>姓名：{{ first + " " + last }}</span>
        </p>
        <h3>双向绑定</h3>
        <p>
            <span>姓：<input type="text" data-ng-model="lastName" /><br /></span>
            <span>名：<input type="text" data-ng-model="firstName" /><br /></span>
            <span>姓名：{{ firstName + " " + lastName }}</span>
        </p>
        <h3>输入验证</h3>
        <p>
            <span>
                 邮箱：<input type="email" data-ng-model="email" name="myAddress" required />
                <span data-ng-show="my.myAddress.$error.email">不是合法邮箱地址</span>
            </span>
        </p>
        <h3>状态</h3>
        <p>
            <span>Error: {{my.myAddress.$error}}(错误信息)。</span><br />
            <span>Valid: {{my.myAddress.$valid}}(如果输入的值是合法的则为 true)。</span><br />
            <span>Dirty: {{my.myAddress.$dirty}}(如果值改变则为 true)。</span><br />
            <span>Touched: {{my.myAddress.$touched}}(如果通过触屏点击则为 true)。</span><br />
        </p>

    </form>
    <script src="../node_modules/angular/angular.min.js"></script>
    <script type="application/javascript">
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.first = $scope.firstName = 'John';
            $scope.last = $scope.lastName = 'Doe';
        });

    </script>
</body>

</html>
